<template>
  <div class="fonpage">
    <div class="toubu">
      <span>跨行票据贴现</span>
    </div>
    <el-form
      ref="formpage"
      :rules="rules"
      :model="formpage"
      label-width="100px"
      class="login-formfp"
    >
      <h2 class="login-title">找回密码</h2>

      <el-form-item label="手机号码:" prop="phone">
        <el-input
          type="text"
          clearable
          v-model="formpage.phone"
          placeholder="请输入手机号码"
        >
          <template slot="append"
            ><span v-show="show2" @click="yanzm" style="cursor: pointer"
              >获取验证码</span
            >
            <span v-show="!show2" class="count">{{ count2 }} s</span>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="验证码:">
        <el-input v-model="formpage.code" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="密码:" prop="nPassword">
        <el-input type="password" v-model="formpage.nPassword"></el-input>
      </el-form-item>

      <el-form-item label="确认密码:" prop="sPassword">
        <el-input type="password" v-model="formpage.sPassword"></el-input>
      </el-form-item>
      <div style="text-align: center">
        <el-form-item>
          <el-button type="primary" @click="onSubmitPass('formpage')"
            >确认</el-button
          >
        </el-form-item>

        <el-form-item>
          <span @click="backyz" class="qxmm">取消</span>
          <!-- <el-button @click="backyz">取消</el-button> -->
        </el-form-item>
      </div>
    </el-form>
    <div class="dibu">
      <div class="wenzi">
        <span>常见问题</span>
        <span style="margin-left: 20px">相关下载</span>
        <span style="margin-left: 20px"
          ><img class="mg" src="@/assets/potho.png" /> 025-5462-4833</span
        >
      </div>
      <div class="hm">
        <span>备案号 IVSHdsadshfksdfjds 苏州开博通联科技有限公司 版权所有</span>
      </div>
    </div>
  </div>
</template>
  <script>
import { encryption } from "@/common/util";
import qs from "qs";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (this.formpage.nPassword == value) {
        callback();
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (this.formpage.sPassword !== value) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      show2: true,
      count2: "",
      formpage: {
        phone: "",
        code: "",
        nPassword: "",
        sPassword: "",
      },
      rules: {
        // code: [{ required: true, message: "验证码必填", trigger: "blur" }],
        phone: [{ required: true, message: "手机号码必填", trigger: "blur" }],
        nPassword: [
          {
            required: true,
            validator: validatePass,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (
                /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(value) == false
              ) {
                callback(new Error("密码由6-18位字母、数字组成"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        sPassword: [
          {
            required: true,
            validator: validatePass2,
            message: "请确认密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 16,
            message: "密码由6-18位字母、数字组成",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (
                /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(value) == false
              ) {
                callback(new Error("密码由6-18位字母、数字组成"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onSubmitPass(formpage) {
      this.$refs[formpage].validate((valid) => {
        const page = encryption({
          data: this.formpage,
          key: "kbaas,kaibocloud",
          param: ["nPassword", "sPassword"],
        });
        if (valid) {
          this.$put("/admin/user/findPassword?" + qs.stringify(page)).then(
            (res) => {
              if (res) {
                console.log(res, +"5555");
                // this.$message({
                //   message: res.msg,
                //   type: "success",
                // });
                // this.$router.push({ path: "HomePage" });
              } else {
                this.$message({
                  message: res.msg,
                  type: "warning",
                });
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    onSuccess() {
      this.msg = "login success";
    },
    onFail() {
      this.msg = "";
    },
    onRefresh() {
      this.msg = "";
    },
    //获取验证码
    yanzm() {
      let obj = {
        phone: this.formpage.phone,
        isRegister: "0",
      };
      this.$fetch(
        "/admin/user/getCodeForgetPassword?" + qs.stringify(obj)
      ).then((res) => {
        if (res.code == 0) {
          this.formpage.code = res.data;
          const TIME_COUNT2 = 60;
          this.$message({
            duration: 600,
            message: res.msg,
            type: "success",
          });
          if (!this.timer2) {
            this.count2 = TIME_COUNT2;
            this.show2 = false;
            this.timer2 = setInterval(() => {
              if (this.count2 > 0 && this.count2 <= TIME_COUNT2) {
                this.count2--;
              } else {
                this.show2 = true;
                clearInterval(this.timer2);
                this.timer2 = null;
              }
            }, 700);
          }
        } else if (res.code == 1) {
          this.$message({
            duration: 600,
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    backyz() {
      this.$router.go(-1); //返回上一层
    },
  },
};
</script>

<style scoped>
.login-formfp {
  width: 500px;
  margin: 60px auto; /* 上下间距160px，左右自动居中*/
  border-radius: 20px; /* 圆角 */
  margin-top: 205px;
}
.qxmm {
  width: 28px;
  height: 13px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #157ef4;
  line-height: 49px;
  cursor: pointer;
}
.toubu {
  width: 100%;
  height: 60px;
  background: #ffffff;
  /* position:fixed;top:0px; */
}
.login-formfp .el-button--primary {
  width: 403px;
}
.mg {
  width: 20px;
}
.toubu span {
  width: 119px;
  height: 20px;
  font-size: 20px;
  font-weight: bold;
  color: #051232;
  line-height: 60px;
  margin-left: 3%;
}
.el-input-group__append {
  color: #157ef4;
  cursor: pointer;
}
.el-form-item__content {
  margin-left: 100px !important;
}
.dibu {
  width: 100%;
  background: #262f3e;
  position: fixed;
  bottom: 0;
}
.wenzi {
  float: left;
  margin-left: 20px;
}
.dibu span {
  width: 182px;
  height: 10px;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  line-height: 53px;
}
.hm {
  float: right;
  margin-right: 29px;
  opacity: 0.2;
}

/* 背景 */
.fonpage {
  position: absolute;
  width: 100%;
  /* height: 100%; */
  background-color: #f3f6f8;
}

/* 标题 */
.login-title {
  font-size: 25px;
  font-weight: 600;
  color: #33425d;
  position: relative;
  margin-left: -70%;
}
</style> 